{% extends "base.html" %}

{% block title %}项目工时统计详情 - 精准效能管理平台{% endblock %}

{% block content %}
<div class="project-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button-container">
        <button onclick="goBack()" class="btn btn-secondary">← 返回列表</button>
    </div>
    
    <!-- 项目概览信息 -->
    <div class="project-overview">
        <h2 id="project-title">项目工时统计详情</h2>
        <div class="overview-cards">
            <div class="overview-card">
                <h3>统计周期</h3>
                <p id="statistics-period">-</p>
            </div>
            <div class="overview-card">
                <h3>项目名称</h3>
                <p id="project-name">-</p>
            </div>
            <div class="overview-card">
                <h3>系统数量</h3>
                <p id="total-systems">-</p>
            </div>
            <div class="overview-card">
                <h3>总需求数</h3>
                <p id="total-requirements">-</p>
            </div>
            <div class="overview-card">
                <h3>总工时</h3>
                <p id="total-worktime">-</p>
            </div>
            <div class="overview-card">
                <h3>涉及角色</h3>
                <p id="total-roles">-</p>
            </div>
        </div>
    </div>

    <!-- 角色统计 -->
    <div class="role-stats-section">
        <h3>角色投入统计</h3>
        <div class="data-table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>角色</th>
                        <th>人员数量</th>
                        <th>投入工时</th>
                        <th>工时占比</th>
                    </tr>
                </thead>
                <tbody id="role-stats-tbody">
                </tbody>
            </table>
        </div>
    </div>

    <!-- 系统详情 -->
    <div class="systems-section">
        <h3>系统详情</h3>
        <div id="systems-container">
            <!-- 系统详情将通过JavaScript动态生成 -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/project_detail.js') }}"></script>
<script>
    // 从URL参数获取项目信息
    const urlParams = new URLSearchParams(window.location.search);
    const period = urlParams.get('period');
    const project = urlParams.get('project');
    
    // 页面加载完成后加载项目详情
    document.addEventListener('DOMContentLoaded', function() {
        if (period && project) {
            loadProjectDetail(period, project);
        } else {
            showMessage('缺少必要参数', 'error');
        }
    });
</script>
{% endblock %}